<template>
	<div title="点击右键有惊喜" @contextmenu.prevent="onContextMenu">
		<el-tabs
			v-model="tabsValue" 
			type="card" 
			closable 
			@tab-click="handleClick"
			@edit="handleTabsEdit">
			<el-tab-pane
				:key="item.name"
				v-for="(item, index) in tabs"
				:label="item.title"
				:name="item.name">
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				tabIndex: '1',
				tabs: [],
				tabsValue: '1',
				disabled: false
			}
		},
		watch: {
			$route: {   
				handler: function(val, oldVal) {
					this.handleTabRoute(val.fullPath);
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// Tab路由标签动态生成
			handleTabRoute(path) {
				if (this.tabs.length == 0) {
					let newTabName = ++this.tabIndex + '';
					this.tabs.push({
						title: this.$route.meta.title,
						name: newTabName,
						content: this.$route.fullPath
					});
					this.tabsValue = newTabName;
				} else {
					let flag = this.tabs.findIndex(item => item.content === path);
					if (flag == -1) {
						let newTabName = ++this.tabIndex + '';
						this.tabs.push({
							title: this.$route.meta.title,
							name: newTabName,
							content: this.$route.fullPath
						});
						this.tabsValue = newTabName;
					} else {
						this.tabs.forEach((tab, index) => {
							if (tab.content === path) {
								this.tabsValue = tab.name;
							}
						});
					}
				}
			},
			// Tab标签移除事件
			handleTabsEdit(targetName, action) {
				if (action === 'remove') {
					let tabs = this.tabs;
					let activeName = this.tabsValue;
					if (activeName !== targetName) {
						tabs.forEach((tab, index) => {
							if (tab.name === targetName) {
								this.tabs = tabs.filter(tab => tab.name !== targetName);
							}
						});
					}
				}
			},
			// Tab标签点击事件
			handleClick(e) {
				this.tabs.forEach((tab, index) => {
					if (tab.name === e.name) {
						this.$router.push(
							{ path: tab.content },
							onComplete => {},
							onAbort => {}
						);
					}
				});
			},
			// 右键打开菜单
			onContextMenu(event) {
				this.disabled = (this.tabs.length<=1)?true:false;
				this.$contextmenu({
					items: [
						{
							label: "关闭其他标签", 
							icon: "el-icon-close",
							disabled: this.disabled,
							onClick: () => {
								let tabs = this.tabs;
								tabs.forEach((tab, index) => {
									this.tabs = tabs.filter(tab => tab.content === this.$route.fullPath);
								});
							}
						},
					],
					event
				});
				return false;
			}
		}
	}
</script>

<style>
	.el-tabs--card>.el-tabs__header {
		border-bottom: 1px solid aliceblue;
		box-shadow: 0px 5px 5px -5px rgb(227 227 227);
		-webkit-box-shadow: 0px 5px 5px -5px rgb(227 227 227);
	}
	.el-tabs--card>.el-tabs__header .el-tabs__nav {
		border: none;
		border-radius: 0;
	}
	.el-tabs--card>.el-tabs__header .el-tabs__item {
		border: none;
	}
	.el-tabs--card>.el-tabs__header .el-tabs__item:first-child {
		border-left: none;
	}
	.el-tabs__item {
		height: 38px;
		line-height: 38px;
	}
	.el-tabs__item.is-active {
		background-color: aliceblue;
	}
</style>
